@import '@/common/style/flex.scss';
$boxShadow:0 2rpx 10rpx 1rpx rgba(0, 0, 0, .1);
.index{
	@include flex-c;
	position: relative;
	z-index: 1;
	>.header{
		flex: 0 0 auto;
		position: relative;
		z-index: 2;
	}
	>.main{
		@include flex-c;
		flex: 1 0 0;
		position: relative;
		overflow: auto;
		z-index: 1;
		background-color: #f7f7f7;
		padding: 20rpx;
		.draw1{
			position: relative;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			box-shadow: $boxShadow;
			.draw1-text{
				@include flex-r-between-center;
				.decoration{
					position: relative;
					>text::before{
						position: absolute;
						bottom: -1rpx;
						height: 3rpx;
						width: 100%;
						content: " ";
						background-color: black;
					}
				}
			}
			.container{
				margin-top: 40rpx;
				padding: 34rpx 0 58rpx;
				@include flex-r-center-center;
				
				.portrait-container {
					@include circle(430);
					box-shadow: inset 0rpx 2rpx 48rpx 40rpx #DBECFF;
				}
				view:not(:first-child){
					@include flex-c;
					justify-content: flex-end;
					text-align: center;
					font-size: 16rpx;
					color: #fff;
					// align-content: center;
					position: absolute;
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					border: 1rpx solid red;
					overflow: hidden;
					>text{
						padding: 10rpx 0;
						background-color: rgba(0, 0, 0, .2);
					}
				}
				.medal1{
					top: 90rpx;
				}
				.medal2{
					right: 90rpx;
				}
				.medal3{
					bottom: 30rpx;
				}
				.medal4{
					left: 90rpx;
				}
			}
		}
		
		
	}
		.draw2{
			@extend .draw1;
			position: relative;
			margin-top: 30rpx;
			.chart{
				// width: 750rpx;
				height: 500rpx;
			}
		}
		.draw3{
			@extend .draw2;
			margin-bottom: 20rpx;
		}
}
